<template>
	<view class="mInput">
		<!-- 千分位展示输入框 -->
		<block v-if="thousand">
			<view v-if="disabled" style="width: 100%;overflow: hidden;">
				<!-- <input v-show="false" :placeholder="placeholder" class="inputCont" :focus='show' :disabled="disabled" :maxlength="maxlength" @blur="onBlur"
				 @input="onInput" v-model="currentValue" /> -->
				 <view class="Thousandth"  style="background: #f9f9f9;padding: 0;">
				 	<text v-if="Thousandth===''" style="color: grey;">{{placeholder}}</text>
				 	<text v-else>{{Thousandth}}</text>
				 </view>
			</view>
			<view v-else style="width: 100%;overflow: hidden;">
				<view class="Thousandth" v-if="!show" @click="thouClick">
					<text v-if="Thousandth===''" style="color: grey;">{{placeholder}}</text>
					<text v-else>
					{{Thousandth===0?'0.00':Thousandth}}
					</text>
				</view>
				<input v-if="show" :placeholder="placeholder" class="inputCont" :focus='show' :disabled="disabled" :maxlength="maxlength"
				 @blur="onBlur" @input="onInput" v-model="currentValue" />
			</view>

		</block>
		<!-- 常规只能输入数字，最多两位小数输入框 -->
		<block v-else>
			<input class="inputCont" :disabled="disabled" :maxlength="maxlength" @input="onInput" v-model="currentValue" />
		</block>

	</view>
</template>

<script>
	export default {
		name: "mInput",
		data() {
			return {
				show: false,
				currentValue: this.value,
				Thousandth: ''
			}
		},
		props: {
			negative:{
				default: false
			},
			thousand: {
				default: true
			},
			value: {
				default: ''
			},
			maxlength: {
				default: '18'
			},
			disabled: {
				default: false
			},
			placeholder: {
				default: ''
			}
		},
		computed: {

		},
		watch: {
			value: function(val) {
				//console.log('this.value监听',val)
				this.currentValue = this.value
			},
			currentValue: function(val) {
				//console.log('this.currentValue监听', val)
				if (val === null || val === NaN || val === 'NaN' || val === '') {
					val = ''
				}
				if (val.length > 1 && val[0] == 0 && val[1] != '.') {
					val = Number(val) + ''
				}
				if (val[0] == '.') {
					val = ''
				}
				val = val + ''
				if(this.negative){
					val = val.replace(/[^\d.-]/g, "")
					val = val.replace(/[^\0-9\.-]/g, '')
					val = val.replace("-","$#$").replace(/\-/g, "").replace("$#$", "-");
					let l = val.split("")
					let t=''
					for(let i=0;i<l.length;i++){
						if(l[i]=='-'&&i!=0){
							l[i]=''
						}
						t+=l[i]
					}
				    val = t
				}else{
					val = val.replace(/[^\d.]/g, "")
					val = val.replace(/[^\0-9\.]/g, '')
				}
				
				val = val.replace(/\.{2,}/g, ".");
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
				//千分位格式处理
				if (this.thousand) {
					this.Thousandth = this.toThousands(val)
				}
				

				this.$emit('input', val)
			},

		},
		mounted() {
			//this.currentValue = this.value
			if (this.thousand) {
				if (this.value === null || this.value === '' || this.value === undefined) {
					this.Thousandth = this.placeholder
				}
				this.Thousandth = this.toThousands(this.value)


			}
		},
		methods: {
			onInput(e) {

				setTimeout(() => {

					this.currentValue = this.value

				}, 0)
			},
			onBlur(e) {
				this.show = false
				// if (this.thousand) {
				// 	this.Thousandth = this.toThousands(this.currentValue)
				// }
				this.$emit('blur', e.detail.value)
			},
			thouClick() {
				this.show = true
			}

		}

	}
</script>

<style lang="scss" scoped>
	.mInput {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		.Thousandth {
			width: 100%;
			height: 4.5rem;
			line-height: 4.5rem;
			font-size: 3rem;
			//padding: 0 2rem;
			text-align: left;
		}

		.inputCont {
			width: 100%;
			height: 4.5rem;
			font-size: 3rem;
			padding: 0 2rem;
		}
	}
</style>
